<template>
  <el-dialog v-model="show" title="运营人员" class="rounded-[15px]">
    <el-form :model="props.row" label-width="120" :rules="rules" ref="formRef">
      <el-form-item label="账户名称">
        <el-input v-model="props.row.username" :input-style="{ width: '250px' }"></el-input>
      </el-form-item>
      <el-form-item label="账户手机">
        <el-input v-model="props.row.phone" :input-style="{ width: '250px' }"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <div class="w-[273px]">
          <valid-phone :phone="props.row.phone" v-model:code="props.row.code" session-name="add_account"></valid-phone>
        </div>
      </el-form-item>
      <el-form-item label="账号头像">
        <choose-file v-model:url="props.row.avatar" :maxSelect="1" file-type="image" :width="120" :height="120"></choose-file>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="props.row.status"
          active-text="是"
          inactive-text="否"
          :active-value="true"
          :inactive-value="false"
        ></el-switch>
      </el-form-item>
      <el-form-item label="二维码">
        <div>
          <div class="w-[150px] h-[150px]" style="border: 2px dashed var(--el-color-info-light-3)">
            <el-image :src="props.row.qrcode"></el-image>
          </div>
          <!-- <el-button class="mt-10px">生成二维码</el-button> -->
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import ChooseFile from "@/components/ChooseFile/index.vue";
import validPhone from "@/components/validPhone/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { checkPhoneNumber } from "@/utils/eleValidate";
import { genCode } from "@/api/modules/account";

const show = ref(false);

interface user {
  id?: number;
  username: string;
  phone: string;
  status: boolean;
  code: string;
  avatar: string;
  qrcode?: string;
}

interface Props {
  row: user;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  isEdit: boolean;
}

const props = ref<Props>({ row: { username: "", phone: "", status: true, code: "", avatar: "" }, isEdit: false });

const acceptParams = (params: Props) => {
  props.value = params;
  show.value = true;
};

const rules: FormRules = {
  username: [
    { required: true, message: "账户名称不可为空", trigger: "blur" },
    { max: 10, min: 1, message: "字数在1-10个之间" }
  ],
  phone: [{ validator: checkPhoneNumber, trigger: "blur" }],
  code: [{ required: true, max: 4, min: 4, message: "验证码格式错误", trigger: "blur" }],
  avatar: [{ required: true, message: "头像不可为空", trigger: "blur" }]
};

// 提交
const formRef = ref<FormInstance>();
const submit = async () => {
  try {
    await props.value.api!(props.value.row);
    ElMessage.success("成功");
    await props.value.getTable!();
    show.value = false;
  } catch (err) {}
};

// 监听
watch(
  () => props.value.row.id,
  async () => {
    if (props.value.row.qrcode === "" && props.value.isEdit) {
      console.log("无二维码");
      const { data } = await genCode({ id: props.value.row.id });
      props.value.row.qrcode = data as any;
      await props.value.getTable!();
    }
  },
  {}
);

defineExpose({ acceptParams });
</script>

<style></style>
